<template>
  <div class="ms">
        <div class="ms-1 wl">
            <div class="dw">
                <h5>聚划算</h5>
                <p>品牌折扣</p>
            </div>
            <img class="t1" src="//gw.alicdn.com/tps/O1CN01a074Bv23swlZlu4Qn_!!6000000007312-0-yinhe.jpg_140x140q90.jpg_.webp" alt="">
            <img class="t2" src="//gw.alicdn.com/tps/O1CN01PtllHh1hBVeRib57V_!!6000000004239-0-yinhe.jpg_180x180q90.jpg_.webp" alt="">
        </div>
        <div class="ms-1">
            <div class="dw">
                <h5>天天特卖</h5>
                <p>1元秒杀</p>
            </div>
            <img class="t1" src="//gw.alicdn.com/tps/O1CN01gqBnAj1UCnm6cg4Ck_!!6000000002482-0-yinhe.jpg_140x140q90.jpg_.webp" alt="">
            <img class="t2" src="//gw.alicdn.com/tps/O1CN01bgiUgx1JB0O0pf49T_!!6000000000989-0-yinhe.jpg_180x180q90.jpg_.webp" alt="">
        </div>
        <div class="ms-1">
            <div class="dw">
                <h5>有好货</h5>
                <!-- <p>品牌折扣</p> -->
            </div>
            <img class="t1" src="//gw.alicdn.com/tps/O1CN01MnmyHY1XGPkFb8i52_!!6000000002896-0-yinhe.jpg_140x140q90.jpg_.webp" alt="">
            <img class="t2" src="//gw.alicdn.com/tps/O1CN018le1A31jtaxabIX0a_!!6000000004606-0-yinhe.jpg_180x180q90.jpg_.webp" alt="">
        </div>
        <div class="ms-1">
            <div class="dw">
                <h5>每日好店</h5>
                <p>特色</p>
            </div>
            <img class="t1" src="//gw.alicdn.com/tps/O1CN01OLi5wY1NatKVhVZpR_!!6000000001587-0-yinhe.jpg_140x140q90.jpg_.webp" alt="">
            <img class="t2" src="//gw.alicdn.com/tps/O1CN01t7gUvM1rZSQTuaLs0_!!6000000005645-0-yinhe.jpg_180x180q90.jpg_.webp" alt="">
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
    .ms {
    width: 7.18rem;
    height: 3.69rem;
    margin: 0.11rem 0 0.18rem 0.17rem;
    background: #fff url(//gw.alicdn.com/imgextra/i4/O1CN01GRrTAV1C7c9I5ykhS_!!6000000000034-2-tps-714-368.png_q90.jpg_.webp) 0 0 / 100% 100%;
    border-radius: 0.24rem;
    display: flex;
    box-sizing: border-box;
    padding: 0.12rem;
    flex-wrap: wrap;
    position: relative;
}

.ms .ms-1 {
    width: 50%;
    height: 50%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ms .ms-1 .dw {
    margin-top: .1rem;
    width: 2.16rem;
    height: 0.34rem;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
}

.ms .ms-1 .dw h5 {
    font-size: 0.29rem;
}

.ms .ms-1 .dw p {
    font-size: 0.22rem;
    background: #ff4201;
    border-radius: 0.1rem;
    color: #fff;
}

.ms .ms-1 .t1 {
    width: 1.26rem;
    height: 1.26rem;
}

.ms .ms-1 .t2 {
    width: 1.6rem;
    height: 1.6rem;
}

.ms .wl:nth-child(1)::after {
    content: "";
    display: block;
    width: 0.01rem;
    height: 3.42rem;
    background: #eee;
    position: absolute;
    top: 0;
    left: 3.32rem;
}

.ms .wl:nth-child(1)::before {
    content: "";
    display: block;
    height: 0.01rem;
    width: 6.84rem;
    background: #eee;
    position: absolute;
    top: 1.74rem;
    left: 0;
}
</style>